<template>
	<div class="python">
	  <el-form :inline="true" :model="pythonSearch" label-width="70px" style="min-width: 1200px;" class='searchForm'>
		<el-form-item label="函数名称">
			<el-input v-model="pythonSearch.name" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item label="所属平台" style="margin-right: 0px;">
		</el-form-item>
		<el-cascader collapse-tags v-model='pythonSearch.plant_module' :options="plant_module_list" :props="props" clearable style="margin-bottom: 15px; margin-right: 32px;"/>
		<el-form-item>
			<el-button type="primary" @click="reset">重置</el-button>
			<el-button type="primary" @click="search">搜索</el-button>
		</el-form-item>
	  </el-form>
	  <el-drawer v-model="editDrawerVisible" :title="title" :direction="direction" :show-close='false' :size="900">
		  <el-form :model="PythonSave" label-position='top' label-width="70px">
			  <el-form-item label="所属模块">
			  	<el-cascader collapse-tags v-model='PythonSave.module' :options="plant_module_list" :props="editProps" clearable style="width: 100%;"/>
			  </el-form-item>
			<el-form-item label="函数名称">
				<el-input v-model="PythonSave.name" autocomplete="off" placeholder="函数名称请与函数方法里的函数名保持一致"/>
			</el-form-item>
			<el-form-item label="函数体">
				<ul>
					<li>导入Python自带模块必须在函数内部导入</li>
					<li>param_obj和log_obj必须是函数最后两个参数且顺序不可颠倒，调用的时候这两个参数不用传递</li>
					<li>param_obj可以通过setattr(param_obj, name, value)来设置变量</li>
					<li>log_obj可以通过log_obj.result=1 来设置用例状态，1:成功 2:失败 3:错误</li>
					<li>log_obj可以通过log_obj.logs.append(formatter_log('error/warning/error/failed/success', msg))来追加用例的日志记录</li>
					<li></li>
				</ul>
			</el-form-item>
			<BodyEdit v-model='PythonSave.script' lang='python'></BodyEdit>
		  </el-form>
		  <template #footer>
			<span class="dialog-footer">
			  <el-button @click="editDrawerVisible = false">取消</el-button>
			  <el-button type="primary" @click="save">
				确认
			  </el-button>
			</span>
		  </template>
	  </el-drawer>
	  <el-table :data="page_list.results" class='table'>
		<el-table-column label="序号" width="70" type="index"/>
		<el-table-column label="函数名称" prop="name" min-width="100"/>
		<el-table-column label="平台名称" prop="plant_name" min-width="100"/>
		<el-table-column label="模块名称" prop="module_name" min-width="100"/>
		<el-table-column label="创建人" prop="create_by_name"  min-width="150"/>
		<el-table-column label="更新人" prop="update_by_name"  min-width="150"/>
		<el-table-column label="创建时间" prop="create_time" sortable min-width="150"/>
		<el-table-column label="更新时间" prop="update_time" sortable min-width="150"/>
		<el-table-column align="center" min-width="180">
			<template #header>
				<el-button v-if='permission.has_add_permission' type='primary' @click="addPython">新增</el-button>
			</template>
			<template #default="scope">
			  <el-button v-if="permission.has_edit_permission" :icon="Edit" size="small" type='primary' @click="editPython(scope.row)">编辑</el-button
			  >
			  <el-button v-if="permission.has_delete_permission"
				@click="deletePython(scope.row.id)"
				size="small"
				type="danger"
			  :icon="Delete"
				>删除</el-button
			  >
			</template>
		</el-table-column>
	  </el-table>
	  <div style="margin: 10px">
	  	<el-pagination
	  	  v-model:current-page="page_size_params.page"
	  	  v-model:page-size="page_size_params.size"
	  	  :page-sizes="[10, 20, 30, 50]"
	  	  :small="small"
	  	  :disabled="disabled"
	  	  :background="background"
	  	  :hide-on-single-page="false"
	  	  layout="total, sizes, prev, pager, next, jumper"
	  	  :total="page_list.count"
	  	  @size-change="handleSizeChange"
	  	  @current-change="handleCurrentChange"
	  	/>
	  </div>
	</div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen} from '@element-plus/icons-vue'
import BodyEdit from '../../components/BodyEdit.vue'

export default{
	components:{
		BodyEdit
	},
	computed:{
		...mapState(['pathPermission', 'projectInfo']),
	},
	data() {
		return {
			props: {
				multiple: true,
				emitPath: false,
				value: 'id',
				label: 'name',
			},
			editProps:{
				emitPath: false,
				value: 'id',
				label: 'name',
			},
			permission: {},
			pythonSearch:{
				name: '',
				project: '',
				plant_module: [],
			},
			page_size_params: {
				page: 1,
				size: 10,
			},
			count: 1,
			title: '新增页面',
			isAdd: true,
			editDrawerVisible: false,
			page_list: [],
			plant_module_list: [],
			ViewVisible: false,
			PythonSave:{
				project: '',
				name: '',
				module: '',
				script: 'def functionName(param_obj, log_obj):\n    pass'
			},
			role_names: [],
		}
	},
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			EditPen,
		}
	},
	methods:{
		...mapActions(['getRolePermission']),
		change(value){
			console.log(value, 'value')
		},
		handleCurrentChange(){
			this.getPythons()
		},
		handleSizeChange(){
			this.getPythons()
		},
		search(){
			this.getPythons()
		},
		reset(){
			for(let key in this.pythonSearch){
				this.pythonSearch[key] = ''
			}
		},
		editPython(row_data){
			this.isAdd = false
			this.title = '编辑Python脚本'
			this.getPython(row_data.id)
			this.editDrawerVisible = true
		},
		addPython(){
			this.title = '新增Python脚本'
			this.editDrawerVisible = true
			this.isAdd = true
		},
		save(){
			if (this.isAdd){
				this.createPython()
			}else{
				this.updatePython()
			}
		},
		async createPython(){
			this.PythonSave.project = this.projectInfo.id
			const response = await this.$api.createPython(this.PythonSave)
			if(response.status === 201){
				this.editDrawerVisible = false
				this.getPythons()
			}
		},
		async updatePython(){
			this.PythonSave.project = this.projectInfo.id
			const response = await this.$api.updatePython(this.PythonSave.id, this.PythonSave)
			if(response.status === 200){
				this.editDrawerVisible = false
				this.getPythons()
			}
		},
		async deletePython(id){
			const response = await this.$api.deletePython(id)
			if (response.status === 204){
				this.getPythons()
			}
		},
		async getPython(id){
			const response = await this.$api.getPython(id)
			if (response.status === 200){
				this.PythonSave = {...response.data.result}
			}
		},
		async getPlantModule(){
			const response = await this.$api.getAllPlantModule({project: this.projectInfo.id})
			if (response.status === 200){
				this.plant_module_list = response.data.results
			}
		},
		async getPythons(){
			this.pythonSearch.project = this.projectInfo.id
			this.PythonSave.project = this.projectInfo.id
			const response = await this.$api.getPythons(Object.assign(this.pythonSearch, this.page_size_params))
			if (response.status === 200){
				this.page_list = {...response.data}
			}
		},
	},
	created() {
		this.getRolePermission(this.pathPermission[this.$route.path]).then(res =>{
			this.permission = {...res.result}
		})
		this.getPlantModule()
		this.getPythons()
		
	}
}
</script>

<style scoped>
	.python{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.python .searchForm{
		width: 100%;
		flex: 1;
		background-color: white;
		padding: 15px 15px 0 15px;
		margin-bottom: 5px;
	}
	.python .el-form--inline .el-form-item{
		margin-bottom: 15px;
	}
	.python .table{
		background-color: white;
		flex: 1;
	}
	.searchForm .el-input{
		width: 150px;
	}
	.searchForm .el-select{
		width: 150px;
	}
	.dialog .el-input{
		width: 300px;
	}
	.dialog .el-select{
		width: 300px;
	}
	.form .el-select{
		width: 300px;
	}
	.el-button{
		width: 70px;
	}
	.el-icon{
		margin-left: 10px;
	}
	
</style>
